<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title} + ' - 应急响应中心管理系统'">页面标题 - 应急响应中心管理系统</title>
    <script th:src="@{/js/permission.js}"></script>
    <!-- 通用样式 -->
    <link rel="stylesheet" th:href="@{/css/main.css}">
    <link rel="stylesheet" th:href="@{/lib/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/lib/bootstrap-icons/font/bootstrap-icons.css}">
    <script th:src="@{/js/auth.js}"></script>
    
    
    <!-- 导航栏样式修复 -->
    <style>
        .navbar-brand {
            display: flex;
            align-items: center;
            white-space: nowrap;
            min-width: 0;
            flex-shrink: 0;
            margin-right: 0.25rem;
        }
        
        .navbar-logo {
            height: 40px;
            margin-right: 10px;
            flex-shrink: 0;
        }
        
        /* 确保导航栏始终水平排列 */
        .navbar .container {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: nowrap;
            min-width: 0;
            gap: 0.5rem;
            padding-left: 0.5rem;
            padding-right: 1.5rem;
        }
        
        .navbar-nav {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            flex-direction: row;
            flex: 1;
            justify-content: flex-start;
            gap: 0.25rem;
            margin-right: 0.5rem;
        }
        
        .nav-item {
            margin-left: 0;
        }
        
        .nav-link {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s ease;
            white-space: nowrap;
            padding: 0.5rem 0.75rem;
            display: block;
        }
        
        .nav-link:hover {
            color: #3498db;
        }
        
        .nav-link.active {
            color: #3498db;
            font-weight: bold;
        }
        
        /* 覆盖main.css的响应式设计，确保导航栏始终水平排列 */
        @media (max-width: 768px) {
            .navbar .container {
                flex-direction: row !important;
                align-items: center !important;
                flex-wrap: nowrap !important;
                gap: 0.15rem !important;
                overflow-x: auto;
                padding-left: 0.25rem;
                padding-right: 1rem;
            }
            
            .navbar-brand {
                font-size: 0.8rem !important;
                margin-right: 0.15rem !important;
                flex-shrink: 0;
                min-width: 0;
            }
            
            .navbar-nav {
                gap: 0.1rem !important;
                flex-shrink: 1;
                min-width: 0;
                margin-right: 0.25rem;
            }
            
            .nav-item {
                margin-left: 0 !important;
            }
            
            .nav-link {
                padding: 0.25rem 0.15rem;
                font-size: 0.75rem;
                white-space: nowrap;
            }
            
            .user-info {
                margin-left: auto !important;
                margin-right: 0 !important;
                padding: 2px 4px !important;
                font-size: 0.65rem !important;
                flex-shrink: 0;
                min-width: 0;
            }
            
            .user-name {
                margin-right: 0.15rem !important;
                font-size: 0.65rem !important;
            }
            
            .user-role-badge {
                margin-right: 0.15rem !important;
                font-size: 0.6rem !important;
                padding: 1px 4px !important;
            }
            
            .logout-btn {
                padding: 0.15rem !important;
                font-size: 0.7rem !important;
            }
        }
        
        @media (max-width: 576px) {
            .navbar .container {
                gap: 0.1rem !important;
                padding-left: 0.15rem;
                padding-right: 0.75rem;
            }
            
            .navbar-nav {
                margin-right: 0.15rem;
            }
        }

        .user-info {
            display: flex;
            align-items: center;
            color: #fff;
            margin-left:0.5rem;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 8px 12px;
            border-radius: 6px;
            backdrop-filter: blur(10px);
            white-space: nowrap;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-shrink: 0;
        }

        .user-name {
            margin-right: 0.5rem;
            font-size: 0.9rem;
            font-weight: 500;
        }

        .user-role-badge {
            margin-right: 0.5rem;
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 12px;
        }

        .logout-btn {
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 0;
            transition: color 0.2s, transform 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            box-shadow: none;
        }
        .logout-btn:hover {
            color: #3498db;
            background: none;
            transform: scale(1.15);
        }
        .logout-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .logout-btn i {
            color: inherit !important;
        }

        .navbar-brand {
            font-size: 1.2rem;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
    
    <!-- 页面特定样式 -->
    <th:block th:replace="${pageStyles} ?: ~{}">
        <!-- 页面特定的样式将在这里插入 -->
    </th:block>
</head>
<body>
    <!-- 通用导航栏片段 -->
    <nav class="navbar" th:fragment="navbar">
        <div class="container">
            <a href="/ercms/dashboard" class="navbar-brand">
                <img th:src="@{/images/ing1.png}" alt="ERCMS Logo" class="navbar-logo">
                应急响应中心管理系统
            </a>
            <ul class="navbar-nav" id="navbar-nav">
                <li class="nav-item">
                    <a th:href="@{/dashboard}" class="nav-link" data-page="dashboard">
                        首页
                    </a>
                </li>
                <!-- 调度中心 - 只有调度员和系统管理员可以访问 -->
                <li class="nav-item" id="dispatch-nav" style="display: none;">
                    <a th:href="@{/dispatch}" class="nav-link" data-page="dispatch">
                        调度中心
                    </a>
                </li>
                <!-- 事件管理 - 所有用户都可以访问，但权限不同 -->
                <li class="nav-item">
                    <a th:href="@{/events}" class="nav-link" data-page="events">
                        事件管理
                    </a>
                </li>
                <!-- 资源调度 - 只有系统管理员、部门经理和调度员可以访问 -->
                <li class="nav-item" id="resource-nav" style="display: none;">
                    <a th:href="@{/resource}" class="nav-link" data-page="resource">
                        资源调度
                    </a>
                </li>
                <!-- 部门管理 - 只有系统管理员和部门经理可以访问 -->
                <li class="nav-item" id="department-nav" style="display: none;">
                    <a th:href="@{/department}" class="nav-link" data-page="department">
                        部门管理
                    </a>
                </li>
                <!-- 用户管理 - 只有系统管理员和部门经理可以访问 -->
                <li class="nav-item" id="user-nav" style="display: none;">
                    <a th:href="@{/user}" class="nav-link" data-page="user">
                        用户管理
                    </a>
                </li>
                <li class="nav-item">
                    <a th:href="@{/profile}" class="nav-link" data-page="profile">
                        个人中心
                    </a>
                </li>
                <!-- 统计分析 - 所有用户都可以访问 -->
                <li class="nav-item">
                    <a th:href="@{/statistics}" class="nav-link" data-page="statistics">
                        统计分析
                    </a>
                </li>
                <!-- 报告管理 - 只有系统管理员、部门经理和调度员可以访问 -->
                <li class="nav-item" id="report-nav" style="display: none;">
                    <a th:href="@{/task-report/management}" class="nav-link" data-page="task-report-management">
                        报告管理
                    </a>
                </li>
            </ul>
            <div class="user-info" id="user-info" style="display: none;">
                <span class="user-name" id="user-name"></span>
                <span class="user-role-badge" id="user-role-badge"></span>
                <button class="logout-btn" id="logout-btn" title="退出登录">
                    <i class="bi bi-box-arrow-right"></i>
                </button>
            </div>
        </div>
    </nav>
    
    <!-- 通用导航栏样式 -->
    <style th:fragment="navbarStyles">
        .navbar-brand {
            display: flex;
            align-items: center;
            white-space: nowrap;
            min-width: 0;
            flex-shrink: 0;
            margin-right: 0.25rem;
        }
        
        .navbar-logo {
            height: 40px;
            margin-right: 10px;
            flex-shrink: 0;
        }
        
        /* 确保导航栏始终水平排列 */
        .navbar .container {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: nowrap;
            min-width: 0;
            gap: 0.5rem;
            padding-left: 0.5rem;
            padding-right: 1.5rem;
        }
        
        .navbar-nav {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            flex-direction: row;
            flex: 1;
            justify-content: flex-start;
            gap: 0.25rem;
            margin-right: 0.5rem;
        }
        
        .nav-item {
            margin-left: 0;
        }
        
        .nav-link {
            color: #fff;
            text-decoration: none;
            transition: color 0.3s ease;
            white-space: nowrap;
            padding: 0.5rem 0.75rem;
            display: block;
        }
        
        .nav-link:hover {
            color: #3498db;
        }
        
        .nav-link.active {
            color: #3498db;
            font-weight: bold;
        }
        
        /* 覆盖main.css的响应式设计，确保导航栏始终水平排列 */
        @media (max-width: 768px) {
            .navbar .container {
                flex-direction: row !important;
                align-items: center !important;
                flex-wrap: nowrap !important;
                gap: 0.15rem !important;
                overflow-x: auto;
                padding-left: 0.25rem;
                padding-right: 1rem;
            }
            
            .navbar-brand {
                font-size: 0.8rem !important;
                margin-right: 0.15rem !important;
                flex-shrink: 0;
                min-width: 0;
            }
            
            .navbar-nav {
                gap: 0.1rem !important;
                flex-shrink: 1;
                min-width: 0;
                margin-right: 0.25rem;
            }
            
            .nav-item {
                margin-left: 0 !important;
            }
            
            .nav-link {
                padding: 0.25rem 0.15rem;
                font-size: 0.75rem;
                white-space: nowrap;
            }
            
            .user-info {
                margin-left: auto !important;
                margin-right: 0 !important;
                padding: 2px 4px !important;
                font-size: 0.65rem !important;
                flex-shrink: 0;
                min-width: 0;
            }
            
            .user-name {
                margin-right: 0.15rem !important;
                font-size: 0.65rem !important;
            }
            
            .user-role-badge {
                margin-right: 0.15rem !important;
                font-size: 0.6rem !important;
                padding: 1px 4px !important;
            }
            
            .logout-btn {
                padding: 0.15rem !important;
                font-size: 0.7rem !important;
            }
        }
        
        @media (max-width: 576px) {
            .navbar .container {
                gap: 0.1rem !important;
                padding-left: 0.15rem;
                padding-right: 0.75rem;
            }
            
            .navbar-nav {
                margin-right: 0.15rem;
            }
        }

        .user-info {
            display: flex;
            align-items: center;
            color: #fff;
            margin-left: auto;
            background-color: rgba(255, 255, 255, 0.1);
            padding: 8px 12px;
            border-radius: 6px;
            backdrop-filter: blur(10px);
            white-space: nowrap;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            flex-shrink: 0;
        }

        .user-name {
            margin-right: 0.5rem;
            font-size: 0.9rem;
            font-weight: 500;
        }

        .user-role-badge {
            margin-right: 0.5rem;
            font-size: 0.75rem;
            padding: 2px 8px;
            border-radius: 12px;
        }

        .logout-btn {
            background: none;
            border: none;
            color: #fff;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 0;
            transition: color 0.2s, transform 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            box-shadow: none;
        }
        .logout-btn:hover {
            color: #3498db;
            background: none;
            transform: scale(1.15);
        }
        .logout-btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .logout-btn i {
            color: inherit !important;
        }

        .navbar-brand {
            font-size: 1.2rem;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>

    <!-- 导航栏JavaScript -->
    <script th:fragment="navbarScript">
        document.addEventListener('DOMContentLoaded', function() {
            // 等待AuthManager和PermissionManager都初始化
            const checkReady = () => {
                if (window.AuthManager && window.PermissionManager) {
                    initNavbar();
                } else {
                    setTimeout(checkReady, 100);
                }
            };
            checkReady();
        });

        function initNavbar() {
            console.log('header.html: 开始初始化导航栏');
            const userInfo = window.AuthManager.getUserInfo();
            console.log('header.html: 获取到的用户信息:', userInfo);
            
            if (!userInfo) {
                console.log('header.html: 用户信息不存在，检查token...');
                const token = window.AuthManager.getToken();
                console.log('header.html: Token存在:', !!token);
                
                if (!token) {
                    console.log('header.html: Token不存在，跳转到登录页');
                    window.location.href = '/ercms/login';
                    return;
                } else {
                    console.log('header.html: Token存在但用户信息不存在，尝试重新加载');
                    window.AuthManager.userInfo = JSON.parse(localStorage.getItem('user_info') || 'null');
                    console.log('header.html: 重新加载后的用户信息:', window.AuthManager.userInfo);
                    
                    if (!window.AuthManager.userInfo) {
                        console.log('header.html: 重新加载后仍无用户信息，跳转到登录页');
                        window.location.href = '/ercms/login';
                        return;
                    }
                }
            }

            // 初始化权限管理器
            if (window.PermissionManager) {
                window.PermissionManager.init(userInfo);
            }

            console.log('header.html: 认证检查通过，显示用户信息');
            // 显示用户信息
            const userInfoDiv = document.getElementById('user-info');
            const userNameSpan = document.getElementById('user-name');
            const userRoleBadge = document.getElementById('user-role-badge');
            
            console.log('header.html: 用户信息元素:', {
                userInfoDiv: !!userInfoDiv,
                userNameSpan: !!userNameSpan,
                userRoleBadge: !!userRoleBadge
            });
            
            if (userInfoDiv && userNameSpan) {
                console.log('header.html: 设置用户信息显示');
                userInfoDiv.style.display = 'flex';
                userNameSpan.textContent = userInfo.realName || userInfo.username;
                console.log('header.html: 用户名设置为:', userInfo.realName || userInfo.username);
                
                // 设置角色badge
                if (userRoleBadge && userInfo.role) {
                    let roleText = '';
                    let badgeClass = 'user-role-badge badge fw-bold';
                    switch (userInfo.role) {
                        case 'ADMIN': roleText = '系统管理员'; badgeClass += ' bg-primary'; break;
                        case 'DEPT_MANAGER': roleText = '部门管理员'; badgeClass += ' bg-success'; break;
                        case 'DISPATCHER': roleText = '调度员'; badgeClass += ' bg-warning text-dark'; break;
                        case 'END_USER': roleText = '终端用户'; badgeClass += ' bg-secondary'; break;
                        default: roleText = userInfo.role; badgeClass += ' bg-secondary';
                    }
                    userRoleBadge.textContent = roleText;
                    userRoleBadge.className = badgeClass;
                    console.log('header.html: 角色设置为:', roleText);
                }
            } else {
                console.error('header.html: 找不到用户信息元素');
            }

            // 根据权限控制导航项显示
            setupNavigationPermissions();

            // 设置当前页面高亮
            const currentPage = window.location.pathname.split('/').pop() || 'dashboard';
            const navLinks = document.querySelectorAll('.nav-link[data-page]');
            
            navLinks.forEach(link => {
                if (link.getAttribute('data-page') === currentPage) {
                    link.classList.add('active');
                }
            });

            // 绑定退出登录事件
            const logoutBtn = document.getElementById('logout-btn');
            if (logoutBtn) {
                logoutBtn.addEventListener('click', async function() {
                    if (confirm('确定要退出登录吗？')) {
                        try {
                            // 禁用按钮防止重复点击
                            logoutBtn.disabled = true;
                            logoutBtn.innerHTML = '<i class="bi bi-hourglass-split"></i>';
                            
                            await window.AuthManager.logout();
                        } catch (error) {
                            console.error('退出登录失败:', error);
                            // 恢复按钮状态
                            logoutBtn.disabled = false;
                            logoutBtn.innerHTML = '<i class="bi bi-box-arrow-right"></i>';
                            alert('退出登录失败，请重试');
                        }
                    }
                });
            }
        }

        // 根据权限设置导航项显示
        function setupNavigationPermissions() {
            if (!window.PermissionManager) {
                console.warn('PermissionManager not available');
                return;
            }

            // 调度中心 - 只有调度员和系统管理员可以访问
            const dispatchNav = document.getElementById('dispatch-nav');
            if (dispatchNav) {
                if (window.PermissionManager.hasPermission('DISPATCH_CENTER', 'access')) {
                    dispatchNav.style.display = 'block';
                }
            }

            // 资源调度 - 只有系统管理员、部门经理和调度员可以访问
            const resourceNav = document.getElementById('resource-nav');
            if (resourceNav) {
                if (window.PermissionManager.hasPermission('RESOURCE_MANAGEMENT', 'access')) {
                    resourceNav.style.display = 'block';
                }
            }

            // 部门管理 - 只有系统管理员和部门经理可以访问
            const departmentNav = document.getElementById('department-nav');
            if (departmentNav) {
                if (window.PermissionManager.hasPermission('DEPARTMENT_MANAGEMENT', 'access')) {
                    departmentNav.style.display = 'block';
                }
            }

            // 用户管理 - 只有系统管理员和部门经理可以访问
            const userNav = document.getElementById('user-nav');
            if (userNav) {
                if (window.PermissionManager.hasPermission('USER_MANAGEMENT', 'access')) {
                    userNav.style.display = 'block';
                }
            }

            // 报告管理 - 只有系统管理员、部门经理和调度员可以访问
            const reportNav = document.getElementById('report-nav');
            if (reportNav) {
                if (window.PermissionManager.hasPermission('REPORT_MANAGEMENT', 'access')) {
                    reportNav.style.display = 'block';
                }
            }
        }
    </script>
</body>
</html> 